<!DOCTYPE html>
<html>
<head>
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d890b1f16fb364253e79c5bb20225c3a";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


    

    

    
<!-- Baidu Tongji -->
<script>var _hmt = _hmt || []</script>
<script async src="//hm.baidu.com/hm.js?busuanzi_value_site_uv"></script>
<!-- End Baidu Tongji -->




    <meta charset="utf-8">
    <meta name="baidu-site-verification" content="FYMCShbUK8" />
    <meta name="baidu-site-verification" content="ZYRF7OxQRW" />
    <meta name="baidu-site-verification" content="cHSqtjI0PN" />
    <meta name="baidu-site-verification" content="cHSqtjI0PN" />
    <meta name="baidu-site-verification" content="cHSqtjI0PN" />
    
    
    <link rel="canonical" href="https://hhardyy.com/2018/05/13/ES6的基本玩法/">
    
    
    <title>ES6的基本玩法 | 小方块 - hhardyy.com | 复杂的坑+归其原理+了解实现规则===解决？解决成功：加油解决成功;</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#958e93">
    
    
    <meta name="keywords" content="ES6,let,const,箭头函数,symbol,set,map,promise,generator,面向对象,ES7&amp;&amp;ES8,keys/values/entries,幂,字符串,async await">
    <meta name="description" content="ES6是下一代JavaScript语言标准的统称，每年6月发布一次修订版，迄今为止已经发布了3个版本，分别是ES2015、ES2016、ES2017。">
<meta name="keywords" content="ES6,let,const,箭头函数,symbol,set,map,promise,generator,面向对象,ES7&amp;&amp;ES8,keys&#x2F;values&#x2F;entries,幂,字符串,async await">
<meta property="og:type" content="article">
<meta property="og:title" content="ES6的基本玩法">
<meta property="og:url" content="http://yoursite.com/2018/05/13/ES6的基本玩法/index.html">
<meta property="og:site_name" content="小方块 - hhardyy.com">
<meta property="og:description" content="ES6是下一代JavaScript语言标准的统称，每年6月发布一次修订版，迄今为止已经发布了3个版本，分别是ES2015、ES2016、ES2017。">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://yoursite.com/images/ES7and8/promise.JPG">
<meta property="og:image" content="http://yoursite.com/images/ES7and8/keyvaluesentries.JPG">
<meta property="og:image" content="http://yoursite.com/images/ES7and8/jiegoufuzhientries.JPG">
<meta property="og:image" content="http://yoursite.com/images/ES7and8/asyncfile.JPG">
<meta property="og:image" content="http://yoursite.com/images/ES7and8/asynAjax.JPG">
<meta property="og:updated_time" content="2020-01-13T15:17:21.483Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="ES6的基本玩法">
<meta name="twitter:description" content="ES6是下一代JavaScript语言标准的统称，每年6月发布一次修订版，迄今为止已经发布了3个版本，分别是ES2015、ES2016、ES2017。">
<meta name="twitter:image" content="http://yoursite.com/images/ES7and8/promise.JPG">
    
        <link rel="alternate" type="application/atom+xml" title="小方块 - hhardyy.com" href="/atom.xml">
    
    <link rel="shortcut icon" href="/hardyfavicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

</head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/img/paulGraham.jpg)">
      <div class="brand" style="background-color:#4154b2">
        <a href="/" class="avatar waves-effect waves-circle waves-light">
          <img src="/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">BingZhenhuang</h5>
          <a href="mailto:huangbingzhen@hhardyy.com" title="huangbingzhen@hhardyy.com" class="mail">huangbingzhen@hhardyy.com</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                所有文章
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                标签
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://github.com/HHardyy" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://gitee.com/hhardyy" target="_blank" >
                <i class="icon icon-lg icon-cloud"></i>
                Gitee
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://juejin.im/user/59a26f926fb9a02487553b04"  >
                <i class="icon icon-lg icon-pencil"></i>
                掘金-圳
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://segmentfault.com/u/hhardyy"  >
                <i class="icon icon-lg icon-comments"></i>
                Segmentfault
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://codepen.io/HHardyy/" target="_blank" >
                <i class="icon icon-lg icon-codepen"></i>
                Codepen
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://www.freecodecamp.cn/hhardyy" target="_blank" >
                <i class="icon icon-lg icon-leaf"></i>
                Freecodecamp
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/友情链接"  >
                <i class="icon icon-lg icon-link"></i>
                友链
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">ES6的基本玩法</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="输入感兴趣的关键字">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">ES6的基本玩法</h1>
        <h5 class="subtitle">
            
                <time datetime="2018-05-13T15:03:26.000Z" itemprop="datePublished" class="page-time">
  2018-05-13
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#ECMAScript和JavaScript到底是什么关系？"><span class="post-toc-number">1.</span> <span class="post-toc-text">ECMAScript和JavaScript到底是什么关系？</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#let"><span class="post-toc-number">2.</span> <span class="post-toc-text">let</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#const"><span class="post-toc-number">3.</span> <span class="post-toc-text">const</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#跨模块常量"><span class="post-toc-number">4.</span> <span class="post-toc-text">跨模块常量</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#全局变量属性"><span class="post-toc-number">5.</span> <span class="post-toc-text">全局变量属性</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#数组的解构赋值"><span class="post-toc-number">6.</span> <span class="post-toc-text">数组的解构赋值</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#对象的解构赋值"><span class="post-toc-number">7.</span> <span class="post-toc-text">对象的解构赋值</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#字符串的解构赋值"><span class="post-toc-number">8.</span> <span class="post-toc-text">字符串的解构赋值</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#函数参数的解构赋值"><span class="post-toc-number">9.</span> <span class="post-toc-text">函数参数的解构赋值</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#箭头函数"><span class="post-toc-number">10.</span> <span class="post-toc-text">箭头函数</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#有些浏览器不支持箭头函数，测试方法"><span class="post-toc-number">11.</span> <span class="post-toc-text">有些浏览器不支持箭头函数，测试方法</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#ES6加入了新的数据类型Symbol与新的数据结构set、map。"><span class="post-toc-number">12.</span> <span class="post-toc-text">ES6加入了新的数据类型Symbol与新的数据结构set、map。</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#数据结构Set。"><span class="post-toc-number">13.</span> <span class="post-toc-text">数据结构Set。</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#set的四个方法："><span class="post-toc-number">14.</span> <span class="post-toc-text">set的四个方法：</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#数据结构Map"><span class="post-toc-number">15.</span> <span class="post-toc-text">数据结构Map</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#promise"><span class="post-toc-number">16.</span> <span class="post-toc-text">promise</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#面向对象"><span class="post-toc-number">17.</span> <span class="post-toc-text">面向对象</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#generator"><span class="post-toc-number">18.</span> <span class="post-toc-text">generator</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#ES7-amp-amp-ES8"><span class="post-toc-number">19.</span> <span class="post-toc-text">ES7&&ES8</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#includes-检查数组是否包含某个东西"><span class="post-toc-number">19.1.</span> <span class="post-toc-text">includes:检查数组是否包含某个东西</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#keys-values-entries"><span class="post-toc-number">19.2.</span> <span class="post-toc-text">keys/values/entries</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#幂"><span class="post-toc-number">19.3.</span> <span class="post-toc-text">幂</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#字符串"><span class="post-toc-number">19.4.</span> <span class="post-toc-text">字符串</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#async-await"><span class="post-toc-number">19.5.</span> <span class="post-toc-text">async await</span></a></li></ol></li></ol>
        </nav>
    </aside>
    
<article id="post-ES6的基本玩法"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">ES6的基本玩法</h1>
        <div class="post-meta">
            <time class="post-time" title="2018-05-13 23:03:26" datetime="2018-05-13T15:03:26.000Z"  itemprop="datePublished">2018-05-13</time>

            


            

        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <p>ES6是下一代JavaScript语言标准的统称，每年6月发布一次修订版，迄今为止已经发布了3个版本，分别是ES2015、ES2016、ES2017。<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=526068535&auto=0&height=66"></iframe><a id="more"></a><br>最近一边玩linux一边玩网络安全，今天突然闲下来更新一下blog，写一下ES6。ES6（ECMAScript6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。</p>
<h3 id="ECMAScript和JavaScript到底是什么关系？"><a href="#ECMAScript和JavaScript到底是什么关系？" class="headerlink" title="ECMAScript和JavaScript到底是什么关系？"></a>ECMAScript和JavaScript到底是什么关系？</h3><p>简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。</p>
<h3 id="let"><a href="#let" class="headerlink" title="let"></a>let</h3><p>允许你声明一个作用域被限制在块级中的变量、语句或者表达式。与var关键字不同的是,它声明的变量只能是全局或者整个函数块的。<br>let与var的区别<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">&#123;</div><div class="line">	<span class="keyword">var</span> a = <span class="number">100</span>;</div><div class="line">	<span class="keyword">let</span> b = <span class="number">200</span>;</div><div class="line">&#125;</div><div class="line"><span class="built_in">console</span>.log(a);	<span class="comment">//100</span></div><div class="line"><span class="built_in">console</span>.log(b);	<span class="comment">//b </span></div><div class="line">is not defined -- <span class="built_in">Error</span></div></pre></td></tr></table></figure></p>
<p>let不存在变量提升<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//ES5****************************</span></div><div class="line"><span class="keyword">var</span> a = [];</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">10</span>; i++) &#123;</div><div class="line">	<span class="keyword">var</span> c = i;</div><div class="line">	a[i] = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="built_in">console</span>.log(c);</div><div class="line">	&#125;;</div><div class="line">&#125;;</div><div class="line">a[<span class="number">5</span>]();	<span class="comment">//9</span></div><div class="line"><span class="comment">//ES6**************************</span></div><div class="line"><span class="keyword">var</span> b = [];</div><div class="line"><span class="keyword">for</span> (<span class="keyword">var</span> j = <span class="number">0</span>; j &lt; <span class="number">10</span>; j++) &#123;</div><div class="line">	<span class="keyword">let</span> d = j;</div><div class="line">	b[j] = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="built_in">console</span>.log(d);</div><div class="line">	&#125;;</div><div class="line">&#125;;</div><div class="line">b[<span class="number">5</span>]();	<span class="comment">//5</span></div></pre></td></tr></table></figure></p>
<p>let不受外界影响<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> a = <span class="number">100</span>;</div><div class="line">&#123;</div><div class="line">	<span class="built_in">console</span>.log(a);	<span class="comment">//undefined</span></div><div class="line">	<span class="keyword">let</span> a = <span class="number">100</span>;</div><div class="line">	<span class="built_in">console</span>.log(a);	<span class="comment">//100</span></div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>let不允许重复声明，模块内也不允许重复声明<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line">&#123;</div><div class="line">	<span class="keyword">var</span> a = <span class="number">100</span>;</div><div class="line">	<span class="keyword">var</span> a = <span class="number">200</span>;</div><div class="line">	<span class="built_in">console</span>.log(a); <span class="comment">//200</span></div><div class="line">&#125;</div><div class="line">&#123;</div><div class="line">	<span class="keyword">let</span> a = <span class="number">100</span>;</div><div class="line">	<span class="keyword">let</span> a = <span class="number">200</span>;</div><div class="line">	<span class="built_in">console</span>.log(a); <span class="comment">//报错</span></div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>块级作用域<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div></pre></td><td class="code"><pre><div class="line">	<span class="built_in">console</span>.log(<span class="string">"ES5:"</span>);</div><div class="line">	<span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="keyword">var</span> num = <span class="number">100</span>;</div><div class="line">		<span class="keyword">if</span> (<span class="literal">true</span>) &#123;</div><div class="line">			<span class="keyword">var</span> num = <span class="number">200</span>;</div><div class="line">		&#125;;</div><div class="line">		<span class="built_in">console</span>.log(num);</div><div class="line">	&#125;;</div><div class="line">	fun();	<span class="comment">//200</span></div><div class="line">**********************************************</div><div class="line">	<span class="built_in">console</span>.log(<span class="string">"ES6:"</span>);</div><div class="line">	<span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="keyword">let</span> num = <span class="number">100</span>;</div><div class="line">		<span class="keyword">if</span> (<span class="literal">true</span>) &#123;</div><div class="line">			<span class="keyword">let</span> num = <span class="number">200</span>;</div><div class="line">		&#125;;</div><div class="line">		<span class="built_in">console</span>.log(num);</div><div class="line">	&#125;;</div><div class="line">	fun();	<span class="comment">//100</span></div></pre></td></tr></table></figure></p>
<p>立即执行函数<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div></pre></td><td class="code"><pre><div class="line">	<span class="built_in">console</span>.log(<span class="string">"ES5:"</span>);</div><div class="line">	<span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="string">"I am outside!"</span>);</div><div class="line">	&#125;;</div><div class="line">	(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="keyword">if</span> (<span class="literal">false</span>) &#123;</div><div class="line">			<span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</div><div class="line">				<span class="built_in">console</span>.log(<span class="string">"I am inside!"</span>);</div><div class="line">			&#125;;</div><div class="line">		&#125;;</div><div class="line">		fun();</div><div class="line">	&#125;());</div><div class="line">******************************************</div><div class="line">	<span class="built_in">console</span>.log(<span class="string">"ES6:"</span>);</div><div class="line">	<span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="string">"I am outside!"</span>);</div><div class="line">	&#125;;</div><div class="line">	(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="keyword">if</span> (<span class="literal">false</span>) &#123;</div><div class="line">			<span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</div><div class="line">				<span class="built_in">console</span>.log(<span class="string">"I am inside!"</span>);</div><div class="line">			&#125;;</div><div class="line">		&#125;;</div><div class="line">		fun();</div><div class="line">	&#125;());</div></pre></td></tr></table></figure></p>
<p>立即执行函数<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div></pre></td><td class="code"><pre><div class="line">	<span class="built_in">console</span>.log(<span class="string">"ES5:"</span>);</div><div class="line">	<span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="string">"I am outside!"</span>);</div><div class="line">	&#125;;</div><div class="line">	(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="keyword">if</span> (<span class="literal">false</span>) &#123;</div><div class="line">			<span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</div><div class="line">				<span class="built_in">console</span>.log(<span class="string">"I am inside!"</span>);</div><div class="line">			&#125;;</div><div class="line">		&#125;;</div><div class="line">		fun();</div><div class="line">	&#125;());</div><div class="line">******************************************</div><div class="line">	<span class="built_in">console</span>.log(<span class="string">"ES6:"</span>);</div><div class="line">	<span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="string">"I am outside!"</span>);</div><div class="line">	&#125;;</div><div class="line">	(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</div><div class="line">		<span class="keyword">if</span> (<span class="literal">false</span>) &#123;</div><div class="line">			<span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</div><div class="line">				<span class="built_in">console</span>.log(<span class="string">"I am inside!"</span>);</div><div class="line">			&#125;;</div><div class="line">		&#125;;</div><div class="line">		fun();</div><div class="line">	&#125;());</div></pre></td></tr></table></figure></p>
<h3 id="const"><a href="#const" class="headerlink" title="const"></a>const</h3><p>const Pi = 3.1415926535;<br>声明创建一个常量，其作用域可以是全局或本地声明的块。 与var变量不同，全局常量不会变为窗口对象的属性。需要一个常数的初始化器；也就是说，必须在声明的同一语句中指定它的值。<br>const声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。例如，在引用内容是对象的情况下，这意味着可以改变对象的内容（例如，其参数）。另外常量不能和它所在作用域内的其他变量或函数拥有相同的名称。</p>
<p>const块级作用域<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span> (<span class="literal">true</span>) &#123;</div><div class="line">		<span class="keyword">const</span> Pi = <span class="number">3.14159265</span>;</div><div class="line">	&#125;;</div><div class="line">	<span class="built_in">console</span>.log(Pi);	<span class="comment">//Pi is not defined</span></div></pre></td></tr></table></figure></p>
<p>const暂时性死区<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">if</span> (<span class="literal">true</span>) &#123;</div><div class="line">	<span class="built_in">console</span>.log(Pi);	<span class="comment">//undefined</span></div><div class="line">	<span class="keyword">const</span> Pi = <span class="number">3.14159265</span>;</div><div class="line">&#125;;</div></pre></td></tr></table></figure></p>
<p>const不可重复声明<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">&#123;</div><div class="line">	<span class="keyword">var</span> a   = <span class="number">100</span>;</div><div class="line">	<span class="keyword">const</span> a = <span class="number">200</span>;</div><div class="line">	<span class="built_in">console</span>.log(a);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>const对象<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> person = &#123;&#125;;</div><div class="line">	person.name  = <span class="string">"hhardyy"</span>;</div><div class="line">	person.age   = <span class="number">22</span>;</div><div class="line">	<span class="built_in">console</span>.log(person.name);	<span class="comment">//hhardyy</span></div><div class="line">	<span class="built_in">console</span>.log(person.age);	<span class="comment">//22</span></div><div class="line">	<span class="built_in">console</span>.log(person);		<span class="comment">//Object &#123;name: "hhardyy", age: 22&#125;</span></div></pre></td></tr></table></figure></p>
<p>const对象错误方法<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> person = &#123;&#125;;</div><div class="line">person.name  = <span class="string">"hhardyy"</span>;</div><div class="line">person.age   = <span class="number">22</span>;</div><div class="line"><span class="built_in">console</span>.log(person.name);</div><div class="line"><span class="built_in">console</span>.log(person.age);</div><div class="line"><span class="built_in">console</span>.log(person);</div><div class="line">person = &#123;&#125;;	<span class="comment">//person is read-only</span></div></pre></td></tr></table></figure></p>
<p>const数组<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line">	<span class="keyword">const</span> arr = [];</div><div class="line">	<span class="built_in">console</span>.log(arr);</div><div class="line">	<span class="built_in">console</span>.log(arr.length);</div><div class="line">**********************************</div><div class="line">	arr.push(<span class="string">"Hello world!"</span>);</div><div class="line">	<span class="built_in">console</span>.log(arr);</div><div class="line">	<span class="built_in">console</span>.log(arr.length);</div><div class="line">**********************************</div><div class="line">	arr.length = <span class="number">0</span>;</div><div class="line">	<span class="built_in">console</span>.log(arr);</div><div class="line">	<span class="built_in">console</span>.log(arr.length);<span class="comment">// 错误用法</span></div><div class="line">	arr = [<span class="string">"Hello Everyone!"</span>];</div></pre></td></tr></table></figure></p>
<p>const对象冻结<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> person = <span class="built_in">Object</span>.freeze(&#123;&#125;);</div><div class="line">person.name  = <span class="string">"hhardyy"</span>;</div><div class="line">person.age   = <span class="number">22</span>;</div><div class="line"><span class="built_in">console</span>.log(person.name);	<span class="comment">//undefined</span></div><div class="line"><span class="built_in">console</span>.log(person.age);	<span class="comment">//undefined</span></div><div class="line"><span class="built_in">console</span>.log(person);		<span class="comment">//Object</span></div></pre></td></tr></table></figure></p>
<p>使用const对象冻结<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> person = <span class="built_in">Object</span>.freeze(&#123;</div><div class="line">	name: <span class="string">"hhardyy"</span>,</div><div class="line">	age : <span class="number">22</span></div><div class="line">&#125;);</div><div class="line"><span class="built_in">console</span>.log(person.name);	<span class="comment">//hhardyy</span></div><div class="line"><span class="built_in">console</span>.log(person.age);	<span class="comment">//22</span></div><div class="line"><span class="built_in">console</span>.log(person);		<span class="comment">//Object</span></div></pre></td></tr></table></figure></p>
<h3 id="跨模块常量"><a href="#跨模块常量" class="headerlink" title="跨模块常量"></a>跨模块常量</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div></pre></td><td class="code"><pre><div class="line">   <span class="comment">//	module.js</span></div><div class="line"><span class="keyword">export</span> <span class="keyword">const</span> intVariantName = <span class="number">100</span>;</div><div class="line"><span class="keyword">export</span> <span class="keyword">const</span> FloatVariantName = <span class="number">3.14159165</span>;</div><div class="line"><span class="keyword">export</span> <span class="keyword">const</span> charVariantName = <span class="string">"variantValue"</span>;</div><div class="line"><span class="comment">//	use.js</span></div><div class="line"><span class="keyword">import</span> * <span class="keyword">as</span> variant <span class="keyword">from</span> <span class="string">'./module'</span>;</div><div class="line"><span class="built_in">console</span>.log(variant.intVariantName);	<span class="comment">//100</span></div><div class="line"><span class="built_in">console</span>.log(variant.FloatVariantName);	<span class="comment">//3.14159165</span></div><div class="line"><span class="built_in">console</span>.log(variant.charVariantName);	<span class="comment">//variantValue</span></div><div class="line"><span class="comment">//	otherUse.js</span></div><div class="line"><span class="keyword">import</span> &#123; FloatVariantName, charVariantName &#125; <span class="keyword">as</span> variant <span class="keyword">from</span> <span class="string">'./module'</span>;</div><div class="line"><span class="built_in">console</span>.log(variant.FloatVariantName);	<span class="comment">//3.14159165</span></div><div class="line"><span class="built_in">console</span>.log(variant.charVariantName);	<span class="comment">//variantValue</span></div><div class="line"><span class="comment">//	OnlyInt.js</span></div><div class="line"><span class="keyword">import</span> intVariantName <span class="keyword">as</span> variant <span class="keyword">from</span> <span class="string">'./module'</span>;</div><div class="line"><span class="built_in">console</span>.log(variant.intVariantName);	<span class="comment">//100</span></div></pre></td></tr></table></figure>
<h3 id="全局变量属性"><a href="#全局变量属性" class="headerlink" title="全局变量属性"></a>全局变量属性</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> varName = <span class="string">"varValue"</span>;</div><div class="line"><span class="comment">//	浏览器环境下</span></div><div class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.varName);	<span class="comment">//varValue</span></div><div class="line"><span class="comment">//	Node.js环境下</span></div><div class="line"><span class="comment">//console.log(global.varName);	//varValue</span></div><div class="line"><span class="comment">//	通用环境</span></div><div class="line"><span class="built_in">console</span>.log(<span class="keyword">this</span>.varName);		<span class="comment">//varValue</span></div><div class="line"><span class="keyword">let</span> letName = <span class="string">"letValue"</span>;</div><div class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.letName);	<span class="comment">//undefined -- use strict</span></div><div class="line"><span class="built_in">console</span>.log(<span class="keyword">this</span>.letName);		<span class="comment">//undefined -- use strict</span></div></pre></td></tr></table></figure>
<h3 id="数组的解构赋值"><a href="#数组的解构赋值" class="headerlink" title="数组的解构赋值"></a>数组的解构赋值</h3><p>数组解构<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> [a, b, c] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</div><div class="line"><span class="built_in">console</span>.log(a);	<span class="comment">//1</span></div><div class="line"><span class="built_in">console</span>.log(b);	<span class="comment">//2</span></div><div class="line"><span class="built_in">console</span>.log(c);	<span class="comment">//3</span></div></pre></td></tr></table></figure></p>
<p>对应位置<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> [foo, [[bar], base]] = [<span class="number">1</span>, [[<span class="number">2</span>], <span class="number">3</span>]];</div><div class="line"><span class="built_in">console</span>.log(foo);	<span class="comment">//1</span></div><div class="line"><span class="built_in">console</span>.log(bar);	<span class="comment">//2</span></div><div class="line"><span class="built_in">console</span>.log(base);	<span class="comment">//3</span></div><div class="line"><span class="keyword">let</span> [, , third] = [<span class="string">"first"</span>, <span class="string">"second"</span>, <span class="string">"third"</span>];</div><div class="line"><span class="built_in">console</span>.log(third);	<span class="comment">//third</span></div><div class="line"><span class="keyword">let</span> [one, , three] = [<span class="string">"One"</span>, <span class="string">"Two"</span>, <span class="string">"Three"</span>];</div><div class="line"><span class="built_in">console</span>.log(one);	<span class="comment">//One</span></div><div class="line"><span class="built_in">console</span>.log(three);	<span class="comment">//Three</span></div><div class="line"><span class="keyword">let</span> [head, ...tail] = [<span class="number">0</span>, <span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>, <span class="number">7</span>, <span class="number">8</span>, <span class="number">9</span>];</div><div class="line"><span class="built_in">console</span>.log(head);	<span class="comment">//0</span></div><div class="line"><span class="built_in">console</span>.log(tail);	<span class="comment">//[1, 2, 3, 4, 5, 6, 7, 8, 9]</span></div></pre></td></tr></table></figure></p>
<p>数组解构不成功<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">   <span class="keyword">var</span> [temp] = [];</div><div class="line"><span class="built_in">console</span>.log(temp);	<span class="comment">//undefined</span></div><div class="line"><span class="keyword">var</span> [first, second] = [<span class="number">100</span>];</div><div class="line"><span class="built_in">console</span>.log(first);	<span class="comment">//100</span></div><div class="line"><span class="built_in">console</span>.log(second);<span class="comment">//undefined</span></div></pre></td></tr></table></figure></p>
<p>不完全解构<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> [x, y] = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>];</div><div class="line"><span class="built_in">console</span>.log(x);	<span class="comment">//1</span></div><div class="line"><span class="built_in">console</span>.log(y);	<span class="comment">//2</span></div><div class="line"><span class="keyword">let</span> [a, [b], c] = [<span class="number">1</span>, [<span class="number">2</span>, <span class="number">3</span>], <span class="number">4</span>];</div><div class="line"><span class="built_in">console</span>.log(a);	<span class="comment">//1</span></div><div class="line"><span class="built_in">console</span>.log(b);	<span class="comment">//2</span></div><div class="line"><span class="built_in">console</span>.log(c);	<span class="comment">//4</span></div></pre></td></tr></table></figure></p>
<p>制定默认值<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> [temp = <span class="string">"string"</span>] = [];</div><div class="line"><span class="built_in">console</span>.log(temp);	<span class="comment">//string</span></div><div class="line"><span class="keyword">var</span> [temp = <span class="string">"string"</span>] = [<span class="string">"tempString"</span>];</div><div class="line"><span class="built_in">console</span>.log(temp);	<span class="comment">//tempString</span></div><div class="line"><span class="keyword">var</span> [x = <span class="string">"aaa"</span>, y] = [<span class="string">"bbb"</span>];</div><div class="line"><span class="built_in">console</span>.log(x);	<span class="comment">//bbb</span></div><div class="line"><span class="built_in">console</span>.log(y);	<span class="comment">//undefined</span></div><div class="line"><span class="keyword">var</span> [m, n = <span class="string">"aaa"</span>] = [<span class="string">"bbb"</span>];</div><div class="line"><span class="built_in">console</span>.log(m);	<span class="comment">//bbb</span></div><div class="line"><span class="built_in">console</span>.log(n);	<span class="comment">//aaa</span></div><div class="line"><span class="keyword">var</span> [p, q = <span class="string">"aaa"</span>] = [<span class="string">"bbb"</span>, <span class="literal">undefined</span>];</div><div class="line"><span class="built_in">console</span>.log(p);	<span class="comment">//bbb</span></div><div class="line"><span class="built_in">console</span>.log(q);	<span class="comment">//aaa</span></div></pre></td></tr></table></figure></p>
<p>非遍历结构–报错<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> [temp] = <span class="number">1</span>;			<span class="comment">//1[Symbol.iterator] is not a function at eval</span></div><div class="line"><span class="keyword">var</span> [temp] = <span class="literal">false</span>;		<span class="comment">//false[Symbol.iterator] is not a function at eval</span></div><div class="line"><span class="keyword">var</span> [temp] = <span class="literal">NaN</span>;		<span class="comment">//NaN[Symbol.iterator] is not a function at eval</span></div><div class="line"><span class="keyword">var</span> [temp] = <span class="literal">undefined</span>; <span class="comment">//Cannot read property 'Symbol(Symbol.iterator)' of undefined at eval</span></div><div class="line"><span class="keyword">var</span> [temp] = <span class="literal">null</span>;		<span class="comment">//Cannot read property 'Symbol(Symbol.iterator)' of null at eval</span></div></pre></td></tr></table></figure></p>
<p>Iterator接口<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> [a, b, c] = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="string">"a"</span>, <span class="string">"b"</span>, <span class="string">"c"</span>]);</div><div class="line"><span class="built_in">console</span>.log(a);	<span class="comment">//a</span></div><div class="line"><span class="built_in">console</span>.log(b);	<span class="comment">//b</span></div><div class="line"><span class="built_in">console</span>.log(c);	<span class="comment">//c</span></div><div class="line"><span class="function"><span class="keyword">function</span>* <span class="title">fibs</span>(<span class="params"></span>) </span>&#123;</div><div class="line">	<span class="keyword">let</span> a = <span class="number">0</span>;</div><div class="line">	<span class="keyword">let</span> b = <span class="number">1</span>;</div><div class="line">	<span class="keyword">while</span> (<span class="literal">true</span>) &#123;</div><div class="line">		<span class="keyword">yield</span> a;</div><div class="line">		[a, b] = [b, a + b];</div><div class="line">	&#125;</div><div class="line">&#125;;</div><div class="line"><span class="keyword">var</span> [first, second, third, fourth, fifth, sixth] = fibs();</div><div class="line"><span class="built_in">console</span>.log(sixth);	<span class="comment">//5</span></div></pre></td></tr></table></figure></p>
<h3 id="对象的解构赋值"><a href="#对象的解构赋值" class="headerlink" title="对象的解构赋值"></a>对象的解构赋值</h3><p>对象的解构赋值不需要按照顺序<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> &#123; name, age &#125; = &#123; <span class="attr">name</span>: <span class="string">"Conan"</span>, <span class="attr">age</span>: <span class="number">28</span> &#125;;</div><div class="line"><span class="built_in">console</span>.log(name);	<span class="comment">//Conan</span></div><div class="line"><span class="built_in">console</span>.log(age);	<span class="comment">//28</span></div></pre></td></tr></table></figure></p>
<p>变量名与属性名不一致<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// var &#123; person_name, person_age, person_id &#125; = &#123; id: "007", name: "Conan", age: 28 &#125;;</span></div><div class="line"><span class="comment">// console.log(person_name);	//undefined</span></div><div class="line"><span class="comment">// console.log(person_age);	//undefined</span></div><div class="line"><span class="comment">// console.log(person_id);		//undefined</span></div><div class="line"><span class="keyword">var</span> &#123; <span class="attr">name</span>: person_name, <span class="attr">age</span>: person_age, <span class="attr">id</span>: person_id &#125; = &#123; <span class="attr">id</span>: <span class="string">"007"</span>, <span class="attr">name</span>: <span class="string">"Conan"</span>, <span class="attr">age</span>: <span class="number">28</span> &#125;;</div><div class="line"><span class="built_in">console</span>.log(person_name);	<span class="comment">//Conan</span></div><div class="line"><span class="built_in">console</span>.log(person_age);	<span class="comment">//28</span></div><div class="line"><span class="built_in">console</span>.log(person_id);		<span class="comment">//007</span></div><div class="line"><span class="keyword">let</span> object = &#123; <span class="attr">first</span>: <span class="string">"Hello"</span>, <span class="attr">last</span>: <span class="string">"World"</span> &#125;;</div><div class="line"><span class="keyword">let</span> &#123; <span class="attr">first</span>: firstName, <span class="attr">last</span>: lastName&#125; = object;</div><div class="line"><span class="built_in">console</span>.log(firstName);	<span class="comment">//Hello</span></div><div class="line"><span class="built_in">console</span>.log(lastName);	<span class="comment">//World</span></div></pre></td></tr></table></figure></p>
<p>对象解构默认值<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> &#123; x = <span class="number">3</span> &#125; = &#123;&#125;;</div><div class="line"><span class="built_in">console</span>.log(x);	<span class="comment">//3</span></div><div class="line"><span class="keyword">var</span> &#123; x, y = <span class="number">5</span> &#125; = &#123; <span class="attr">x</span>: <span class="number">1</span> &#125;;</div><div class="line"><span class="built_in">console</span>.log(x);	<span class="comment">//1</span></div><div class="line"><span class="built_in">console</span>.log(y);	<span class="comment">//5</span></div><div class="line"><span class="keyword">var</span> &#123; <span class="attr">message</span>: msg = <span class="string">"You Are A Person!"</span> &#125; = &#123;&#125;;</div><div class="line"><span class="built_in">console</span>.log(msg);	<span class="comment">//You Are A Person!</span></div></pre></td></tr></table></figure></p>
<p>对象解构默认值条件<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> &#123; x = <span class="number">3</span> &#125; = &#123; <span class="attr">x</span>: <span class="literal">undefined</span> &#125;;</div><div class="line"><span class="built_in">console</span>.log(x);	<span class="comment">//3</span></div><div class="line"><span class="keyword">var</span> &#123; y = <span class="number">3</span> &#125; = &#123; <span class="attr">y</span>: <span class="literal">null</span> &#125;;</div><div class="line"><span class="built_in">console</span>.log(y);	<span class="comment">//null</span></div></pre></td></tr></table></figure></p>
<p>已声明变量的解构赋值<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> x;</div><div class="line">(&#123;x&#125; = &#123; <span class="attr">x</span>: <span class="number">1</span> &#125;);</div><div class="line"><span class="built_in">console</span>.log(x);	<span class="comment">//1</span></div></pre></td></tr></table></figure></p>
<p>现有对象的方法<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.sin(<span class="built_in">Math</span>.PI/<span class="number">6</span>));	<span class="comment">//0.49999999999999994</span></div><div class="line"><span class="keyword">let</span> &#123; sin, cos, tan, log &#125; = <span class="built_in">Math</span>;</div><div class="line"><span class="built_in">console</span>.log(sin(<span class="built_in">Math</span>.PI/<span class="number">6</span>));		<span class="comment">//0.49999999999999994</span></div></pre></td></tr></table></figure></p>
<h3 id="字符串的解构赋值"><a href="#字符串的解构赋值" class="headerlink" title="字符串的解构赋值"></a>字符串的解构赋值</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> [ a, b, c, d, e ] = <span class="string">"Hello"</span>;</div><div class="line"><span class="built_in">console</span>.log(a);	<span class="comment">//H</span></div><div class="line"><span class="built_in">console</span>.log(b);	<span class="comment">//e</span></div><div class="line"><span class="built_in">console</span>.log(c);	<span class="comment">//l</span></div><div class="line"><span class="built_in">console</span>.log(d);	<span class="comment">//l</span></div><div class="line"><span class="built_in">console</span>.log(e);	<span class="comment">//o</span></div></pre></td></tr></table></figure>
<p>字符串的属性解构<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">const</span> &#123; <span class="attr">length</span>: len &#125; = <span class="string">"Hello"</span>;</div><div class="line"><span class="built_in">console</span>.log(len);	<span class="comment">//5</span></div><div class="line"><span class="keyword">const</span> &#123; length &#125; = <span class="string">"Hello World!"</span>;</div><div class="line"><span class="built_in">console</span>.log(length);<span class="comment">//12</span></div></pre></td></tr></table></figure></p>
<h3 id="函数参数的解构赋值"><a href="#函数参数的解构赋值" class="headerlink" title="函数参数的解构赋值"></a>函数参数的解构赋值</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">sum</span>(<span class="params">[x, y]</span>) </span>&#123;</div><div class="line">	<span class="keyword">return</span> x + y;</div><div class="line">&#125;;</div><div class="line"><span class="built_in">console</span>.log(sum([<span class="number">1</span>, <span class="number">2</span>]));	<span class="comment">//3</span></div></pre></td></tr></table></figure>
<p>函数参数解构赋值的默认值<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span> (<span class="params">&#123;x = <span class="number">0</span>, y = <span class="number">0</span>&#125; = &#123;&#125;</span>) </span>&#123;</div><div class="line">	<span class="keyword">return</span> [x, y];</div><div class="line">&#125;;</div><div class="line"><span class="built_in">console</span>.log(fun(&#123;<span class="attr">x</span>: <span class="number">100</span>, <span class="attr">y</span>: <span class="number">200</span>&#125;));	<span class="comment">//[100, 200]</span></div><div class="line"><span class="built_in">console</span>.log(fun(&#123;<span class="attr">x</span>: <span class="number">100</span>&#125;));			<span class="comment">//[100, 0]</span></div><div class="line"><span class="built_in">console</span>.log(fun(&#123;&#125;));				<span class="comment">//[0, 0]</span></div><div class="line"><span class="built_in">console</span>.log(fun());					<span class="comment">//[0, 0]</span></div></pre></td></tr></table></figure></p>
<p>函数参数解构赋值的默认值undefined<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span> (<span class="params">&#123;x, y&#125; = &#123; x: <span class="number">0</span>, y: <span class="number">0</span> &#125;</span>) </span>&#123;</div><div class="line">	<span class="keyword">return</span> [x, y];</div><div class="line">&#125;;</div><div class="line"><span class="built_in">console</span>.log(fun(&#123;<span class="attr">x</span>: <span class="number">100</span>, <span class="attr">y</span>: <span class="number">200</span>&#125;));	<span class="comment">//[100, 200]</span></div><div class="line"><span class="built_in">console</span>.log(fun(&#123;<span class="attr">x</span>: <span class="number">100</span>&#125;));			<span class="comment">//[100, undefined]</span></div><div class="line"><span class="built_in">console</span>.log(fun(&#123;&#125;));				<span class="comment">//[undefined, undefined]</span></div><div class="line"><span class="built_in">console</span>.log(fun());					<span class="comment">//[0, 0]</span></div></pre></td></tr></table></figure></p>
<h3 id="箭头函数"><a href="#箭头函数" class="headerlink" title="箭头函数"></a>箭头函数</h3><p>Arrow Function（箭头函数）。<br>为什么叫Arrow Function？因为它的定义用的就是一个箭头：<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">x =&gt; x * x</div></pre></td></tr></table></figure></p>
<p>相当于ES5的<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> (<span class="params">x</span>) </span>&#123;</div><div class="line">    <span class="keyword">return</span> x * x;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h3 id="有些浏览器不支持箭头函数，测试方法"><a href="#有些浏览器不支持箭头函数，测试方法" class="headerlink" title="有些浏览器不支持箭头函数，测试方法"></a>有些浏览器不支持箭头函数，测试方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="meta">'use strict'</span>;<span class="comment">//使用严格模式</span></div><div class="line"><span class="keyword">var</span> fn = <span class="function"><span class="params">x</span> =&gt;</span> x * x;</div><div class="line"><span class="built_in">console</span>.log(<span class="string">'浏览器不支持'</span>);</div></pre></td></tr></table></figure>
<p>普通函数中的this:<br>1.this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.function ,那么function中的this就指向obj<br>2.在默认情况(非严格模式下,未使用 ‘use strict’),没找到直接调用者,则this指的是 window<br>3.在严格模式下,没有直接调用者的函数中的this是undefined<br>4.使用call,apply,bind(ES5新增)绑定的,this指的是绑定的对象</p>
<p>箭头函数中的this<br>没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; </p>
<h3 id="ES6加入了新的数据类型Symbol与新的数据结构set、map。"><a href="#ES6加入了新的数据类型Symbol与新的数据结构set、map。" class="headerlink" title="ES6加入了新的数据类型Symbol与新的数据结构set、map。"></a>ES6加入了新的数据类型Symbol与新的数据结构set、map。</h3><p>symbol最大的特点是唯一性，symbol不能隐式的转换类型，所以和其他数类型数据做运算时会报错。但是，symbol可以显式地转为字符串和布尔类型。对象object，在添加symbol类型属性时，必须用[]外扩symbol，不能用点式法对其进行操作。如同其他类型数据一般，symbol也有一些内置方法。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> a=<span class="built_in">Symbol</span>();</div><div class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> a);<span class="comment">//symbol,js语言的数据类型再添一员</span></div></pre></td></tr></table></figure></p>
<p>Symbol不是一个构造函数，如果new Symbol会报错<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> sym1 = <span class="built_in">Symbol</span>();</div><div class="line"><span class="keyword">var</span> sym2 = <span class="built_in">Symbol</span>(<span class="string">"foo"</span>);</div><div class="line"><span class="keyword">var</span> sym3 = <span class="built_in">Symbol</span>(<span class="string">"foo"</span>);</div><div class="line"><span class="built_in">console</span>.log(sym1, sym2, sym3) <span class="comment">//输出Symbol() Symbol(foo) Symbol(foo)</span></div><div class="line">用同样的参数创建两次， 也是不相等的：</div><div class="line"><span class="built_in">Symbol</span>(<span class="string">"foo"</span>) === <span class="built_in">Symbol</span>(<span class="string">"foo"</span>); <span class="comment">//输出：false</span></div><div class="line"></div><div class="line"><span class="keyword">let</span> a=<span class="built_in">Symbol</span>();</div><div class="line"><span class="keyword">let</span> b=<span class="built_in">Symbol</span>();</div><div class="line"><span class="built_in">console</span>.log(a);<span class="comment">//Symbol()</span></div><div class="line"><span class="built_in">console</span>.log(b);<span class="comment">//Symbol(),a与b虽然不相等，但是打印出的数据却是一样的，为了区分他们，可以传参：</span></div><div class="line"><span class="keyword">let</span> c=<span class="built_in">Symbol</span>(<span class="string">'ccc'</span>);<span class="comment">//Symbol(ccc),传入的参数仅做标记，没有任何实际意义</span></div></pre></td></tr></table></figure></p>
<p>symbol类型的数据不能与其他类型的数据进行运算，它可以转为string与boolean类型，但是不能转换为number类型，</p>
<h3 id="数据结构Set。"><a href="#数据结构Set。" class="headerlink" title="数据结构Set。"></a>数据结构Set。</h3><p>类似于数组，只不过其成员值都是唯一的，没有重复的值，向Set加入值的时候，不会发生类型转换。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">Set</span>本身是一个构造函数，用来生成<span class="built_in">Set</span>数据结构。</div><div class="line"><span class="keyword">var</span> s = <span class="keyword">new</span> <span class="built_in">Set</span>();</div><div class="line"><span class="comment">// 通过add方法向Set结构中加入成员</span></div><div class="line">[<span class="number">2</span>, <span class="number">3</span>, <span class="number">5</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">2</span>, <span class="number">2</span>].map(<span class="function"><span class="params">x</span> =&gt;</span> s.add(x))</div><div class="line"><span class="keyword">for</span> (i <span class="keyword">of</span> s) &#123; <span class="built_in">console</span>.log(i) &#125;</div><div class="line"><span class="comment">// 2 3 4 5 （表明set结构不会添加重复的值）</span></div><div class="line"></div><div class="line"><span class="built_in">Set</span>结构接收一个数组作为参数，用来初始化。</div><div class="line"><span class="keyword">var</span> items = <span class="keyword">new</span> <span class="built_in">Set</span>([<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">5</span>, <span class="number">5</span>]);</div><div class="line">items.size </div><div class="line"><span class="comment">// 5</span></div></pre></td></tr></table></figure></p>
<h3 id="set的四个方法："><a href="#set的四个方法：" class="headerlink" title="set的四个方法："></a>set的四个方法：</h3><p>add(value) : 添加value。<br>delete(value) : 删除value。<br>has(value) : 返回一个布尔值，表示该值是否为Set的成员。<br>clear() : 清除所有成员。</p>
<h3 id="数据结构Map"><a href="#数据结构Map" class="headerlink" title="数据结构Map"></a>数据结构Map</h3><p>Js对象本质上是键值对的集合。但是只能使用字符串充当键。ES6为了解决这个问题提供了Map结构。它类似对象，也是键值对集合，但是”键”的范围不限于字符串，对象也可以当作键。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> data = &#123;&#125;;</div><div class="line"><span class="keyword">var</span> el = <span class="built_in">document</span>.getElementById(<span class="string">"Div"</span>);</div><div class="line"><span class="comment">// 将DOM节点el当做对象data的键，但是对象只接受字符串作为键名，所以el被自动转换为字符串"[Object HTMLDivElement]"</span></div><div class="line">data[el] = metadata;</div><div class="line"></div><div class="line"><span class="comment">//map下</span></div><div class="line"><span class="keyword">var</span> m = <span class="keyword">new</span> <span class="built_in">Map</span>();</div><div class="line">o = &#123;<span class="attr">p</span>: <span class="string">"hello world"</span>&#125;;</div><div class="line">m.set(o, <span class="string">"content"</span>);<span class="comment">//o作为m的一个键</span></div><div class="line"><span class="built_in">console</span>.log( m.get(o) );  <span class="comment">// content</span></div></pre></td></tr></table></figure></p>
<p>Map函数可接收一个数组进行初始化。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> map = <span class="keyword">new</span> <span class="built_in">Map</span>([[<span class="string">"name"</span>, <span class="string">"hhardyy"</span>], [<span class="string">"title"</span>, <span class="string">"hhardyytitle"</span>]]);</div></pre></td></tr></table></figure></p>
<p>Map的6种方法：<br>size : 返回成员总数。<br>set(key, value) : 设置一个键值对。<br>get(key) : 读取一个键。<br>has(key) : 返回一个布尔值，表示某个键是否在Map结构中。<br>delete(key) : 删除某个键。<br>clear() : 清除所有成员。<br>Map原生提供三个遍历器。<br>key() : 返回键名的遍历器。<br>values() : 返回键值的遍历器。<br>entries() : 返回所有成员的遍历器。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">for</span> ( <span class="keyword">let</span> key <span class="keyword">of</span> map.key() ) &#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">"key: %s"</span>, key);</div><div class="line">&#125;</div><div class="line"><span class="keyword">for</span> ( <span class="keyword">let</span> value <span class="keyword">of</span> map.value() ) &#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">"value: %s"</span>, value);</div><div class="line">&#125;</div><div class="line"><span class="keyword">for</span> ( <span class="keyword">let</span> item <span class="keyword">of</span> map.entries() ) &#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">"Key: %s, Value: %s"</span>, item[<span class="number">0</span>], item[<span class="number">1</span>]);</div><div class="line">&#125;</div><div class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">of</span> map) &#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">"Key: %s, Value: %s"</span>, item[<span class="number">0</span>], item[<span class="number">1</span>]);</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>Map还有一个forEach方法，与数组中的forEach方法类似，也可以实现遍历。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line">map.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value, key, map</span>) </span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">"Key: %s, Value: %s"</span>, key, value);</div><div class="line">&#125;);</div></pre></td></tr></table></figure></p>
<p>forEach方法还可接受第二个参数，用来绑定this。<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">var</span> reporter = &#123;</div><div class="line">    report: <span class="function"><span class="keyword">function</span>(<span class="params">key, value</span>) </span>&#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="string">"key: %s, Value: %s"</span>, key, value);</div><div class="line">    &#125;</div><div class="line">&#125;;</div><div class="line"></div><div class="line">map.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value, key, map</span>) </span>&#123;</div><div class="line">    <span class="keyword">this</span>.report(key, value)</div><div class="line">&#125;, reporter);</div><div class="line">forEach()方法的回调函数中的<span class="keyword">this</span>, 就指向reporter</div></pre></td></tr></table></figure></p>
<h3 id="promise"><a href="#promise" class="headerlink" title="promise"></a>promise</h3><p>举个栗子，有5个互相嵌套的异步请求<br>第一种实现方式，callback回调，这种方法如果想更改一些业务需求，还是比较麻烦的，而且如果在没有注释的情况下，去看代码可能有点头大<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params">cb</span>)</span>&#123;</div><div class="line">	setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">		cb&amp;&amp;cb()</div><div class="line">	&#125;,<span class="number">1000</span>)</div><div class="line">&#125;</div><div class="line">func(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">	<span class="built_in">console</span>.log(<span class="number">1</span>);</div><div class="line">	func(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">		<span class="built_in">console</span>.log(<span class="number">2</span>);</div><div class="line">		func(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">			<span class="built_in">console</span>.log(<span class="number">3</span>)</div><div class="line">			func(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">				<span class="built_in">console</span>.log(<span class="number">4</span>)</div><div class="line">				func(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">					<span class="built_in">console</span>.log(<span class="number">5</span>)</div><div class="line">				&#125;)</div><div class="line">			&#125;)</div><div class="line">		&#125;)</div><div class="line">	&#125;)</div><div class="line">&#125;)</div></pre></td></tr></table></figure></p>
<p>第二种实现方式，Promise，可以做成像无脑安装软件一样一直下一步<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params"></span>)</span>&#123;</div><div class="line">	<span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=&gt;</span>&#123;</div><div class="line">		setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">			resolve()</div><div class="line">		&#125;,<span class="number">1000</span>)</div><div class="line">	&#125;)</div><div class="line">&#125;</div><div class="line">func2().then(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">	<span class="built_in">console</span>.log(<span class="number">11</span>)</div><div class="line">	<span class="keyword">return</span> func2()</div><div class="line">&#125;).then(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">	<span class="built_in">console</span>.log(<span class="number">22</span>)</div><div class="line">	<span class="keyword">return</span> func2()</div><div class="line">&#125;).then(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">	<span class="built_in">console</span>.log(<span class="number">33</span>)</div><div class="line">	<span class="keyword">return</span> func2()</div><div class="line">&#125;).then(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">	<span class="built_in">console</span>.log(<span class="number">44</span>)</div><div class="line">	<span class="keyword">return</span> func2()</div><div class="line">&#125;).then(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</div><div class="line">	<span class="built_in">console</span>.log(<span class="number">55</span>)</div><div class="line">	<span class="keyword">return</span> func2()</div><div class="line">&#125;)</div></pre></td></tr></table></figure></p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/ES7and8/promise.JPG" alt="实现的效果是一样的" title="">
                </div>
                <div class="image-caption">实现的效果是一样的</div>
            </figure>
<p>什么是Promise？Promise就是用同步的方式，书写异步代码，用它原生的写法有点繁琐，因为要new多个Promise对象，然后每个发送ajax，然后再每个then(resolve,reject）,这里就直接写个处理过的<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">Promise</span>.all([ajax1,ajax2,ajax3,ajaxn]).then(<span class="function"><span class="params">res</span>=&gt;</span>&#123;成功&#125;,err=&gt;&#123;失败&#125;)</div></pre></td></tr></table></figure></p>
<p>还有个叫 promise.race<br>promise.all是与的关系，promise.race中的race=竞速的意思，也就是哪个先到先请求哪个<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line">promise.race([</div><div class="line">    $.ajax(&#123;<span class="attr">url</span>:<span class="string">'hhardyy.com/data/1'</span>&#125;)</div><div class="line">    $.ajax(&#123;<span class="attr">url</span>:<span class="string">'hhardyy.com/data/2'</span>&#125;)</div><div class="line">    $.ajax(&#123;<span class="attr">url</span>:<span class="string">'hhardyy.com/data/3'</span>&#125;)</div><div class="line">    $.ajax(&#123;<span class="attr">url</span>:<span class="string">'hhardyy.com/data/4'</span>&#125;)比如这个先到了就用这个</div><div class="line">    $.ajax(&#123;<span class="attr">url</span>:<span class="string">'hhardyy.com/data/5'</span>&#125;)</div><div class="line">])</div></pre></td></tr></table></figure></p>
<h3 id="面向对象"><a href="#面向对象" class="headerlink" title="面向对象"></a>面向对象</h3><p>以前的面向对象<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div></pre></td><td class="code"><pre><div class="line"><span class="comment">// 对象</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">User</span>(<span class="params">name,pass</span>)</span>&#123;</div><div class="line">    <span class="keyword">this</span>.name=name;</div><div class="line">    <span class="keyword">this</span>.pass=pass;</div><div class="line">&#125;</div><div class="line">User.prototype.showName=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.name);</div><div class="line">&#125;</div><div class="line">User.prototype.showPass=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.pass)</div><div class="line">&#125;</div><div class="line"><span class="keyword">let</span> user=<span class="keyword">new</span> User(<span class="string">'hhardyy'</span>,<span class="string">'123456'</span>)</div><div class="line">user.showName();</div><div class="line">user.showPass();</div><div class="line"><span class="comment">// 继承</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">VipUser</span>(<span class="params">name,pass,level</span>)</span>&#123;</div><div class="line">User.call(<span class="keyword">this</span>,name,pass);</div><div class="line">    <span class="keyword">this</span>.level=level;</div><div class="line">&#125;</div><div class="line">VipUser.prototype=<span class="keyword">new</span> User();</div><div class="line">VipUser.prototype.constructor=VipUser;</div><div class="line">VipUser.prototype.showLevel=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="keyword">this</span>.level)</div><div class="line">&#125;</div><div class="line"><span class="keyword">let</span> vipuser=<span class="keyword">new</span> VipUser(<span class="string">'huangbingzhen'</span>,<span class="string">'123456'</span>,<span class="number">3</span>)</div><div class="line"><span class="built_in">console</span>.log(<span class="string">"继承"</span>)</div><div class="line">vipuser.showName();</div><div class="line">vipuser.showPass();</div><div class="line">vipuser.showLevel();</div></pre></td></tr></table></figure></p>
<p>ES6的面向对象<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//对象</span></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">User</span></span>&#123;</div><div class="line">    <span class="keyword">constructor</span>(name,pass)&#123;</div><div class="line">    	<span class="keyword">this</span>.name=name;</div><div class="line">    	<span class="keyword">this</span>.pass=pass;</div><div class="line">    &#125;</div><div class="line">    showName()&#123;</div><div class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name)</div><div class="line">    &#125;</div><div class="line">    showPass()&#123;</div><div class="line">    	<span class="built_in">console</span>.log(<span class="keyword">this</span>.pass)</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="keyword">let</span> user=<span class="keyword">new</span> User(<span class="string">'huangbingzhen'</span>,<span class="string">'123456'</span>)</div><div class="line">user.showName();</div><div class="line">user.showPass();</div><div class="line"><span class="comment">// 继承</span></div><div class="line"><span class="class"><span class="keyword">class</span> <span class="title">vipUser</span> <span class="keyword">extends</span> <span class="title">User</span></span>&#123;</div><div class="line">    <span class="keyword">constructor</span>(name,pass,level)&#123;</div><div class="line">    	<span class="keyword">super</span>(name,pass)     <span class="comment">//超类</span></div><div class="line">    	<span class="keyword">this</span>.level=level</div><div class="line">    &#125;</div><div class="line">    showLevel()&#123;</div><div class="line">    	<span class="built_in">console</span>.log(<span class="keyword">this</span>.level)</div><div class="line">    &#125;</div><div class="line">&#125;</div><div class="line"><span class="keyword">let</span> vipuser=<span class="keyword">new</span> vipUser(<span class="string">'huangbingzhen'</span>,<span class="string">'123456'</span>,<span class="number">3</span>)</div><div class="line">vipuser.showName();</div><div class="line">vipuser.showPass();</div><div class="line">vipuser.showLevel();</div></pre></td></tr></table></figure></p>
<h3 id="generator"><a href="#generator" class="headerlink" title="generator"></a>generator</h3><p>generator: 生成器<br>普通函数=一路到底，generator函数=中间能停<br>比方：普通函数=飞机高铁，行驶途中不允许下车一下；generator函数=出租车（：老哥我下车一下马上回来，：去吧）<br>generator函数<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span>* <span class="title">show</span> |  <span class="title">function</span> * <span class="title">show</span>(<span class="params"></span>) | <span class="title">function</span> *<span class="title">show</span>(<span class="params"></span>)</span></div></pre></td></tr></table></figure></p>
<p>yield：作用和java里头的一样<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> *<span class="title">show</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'a'</span>);</div><div class="line">    <span class="keyword">yield</span>;       <span class="comment">//截断</span></div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'b'</span>);</div><div class="line">&#125;</div><div class="line"><span class="keyword">let</span> genObj=show();</div><div class="line"><span class="built_in">console</span>.log(genObj)</div><div class="line">genObj.next() <span class="comment">//只出a</span></div><div class="line">genObj.next() <span class="comment">//出完a,b</span></div></pre></td></tr></table></figure></p>
<p>它相当于把一个大函数分成了几个小函数show_1()、show_2()，应用场景=比如请求数据<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">ajaxFunc</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    代码...</div><div class="line">    $.ajax（xxx.function()&#123;</div><div class="line">    	然后为了写的好，下面的代码就要写到这里，回调代码...，然后就形成回调地狱~~~</div><div class="line">    &#125;）</div><div class="line">    代码...</div><div class="line">&#125;</div><div class="line"><span class="comment">//generator函数</span></div><div class="line"><span class="function"><span class="keyword">function</span> <span class="title">ajaxFunc</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    ...代码</div><div class="line">    <span class="keyword">yield</span> $.ajax(xxx,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;)    <span class="comment">//到这里就可以暂停一下读数据</span></div><div class="line">    ...代码</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>yield可以传参<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> *<span class="title">show</span>(<span class="params">num</span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(num)</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'a'</span>);</div><div class="line">    <span class="keyword">let</span> item=<span class="keyword">yield</span>;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'b'</span>)</div><div class="line">    <span class="built_in">console</span>.log(item)</div><div class="line">&#125;</div><div class="line"><span class="keyword">let</span> genObject=show(<span class="number">100</span>)</div><div class="line">genObject.next(<span class="number">12</span>)</div></pre></td></tr></table></figure></p>
<p>第一个过程传参=原来函数的传参方法，第一个过程是没办法给yield传参的<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> *<span class="title">show</span>(<span class="params">num</span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(num);</div><div class="line">    <span class="keyword">yield</span></div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'b'</span>)</div><div class="line">&#125;</div><div class="line">第二个过程之后就可以</div><div class="line">genObject.next(<span class="number">5</span>)</div></pre></td></tr></table></figure></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div></pre></td><td class="code"><pre><div class="line"><span class="function"><span class="keyword">function</span> *<span class="title">show</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'a'</span>);</div><div class="line">    <span class="keyword">yield</span> <span class="number">12</span>;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'b'</span>);</div><div class="line">    <span class="keyword">return</span> <span class="number">55</span></div><div class="line">&#125;</div><div class="line"><span class="keyword">let</span> genObj=show()</div><div class="line"><span class="keyword">let</span> res1=genObj.next()</div><div class="line"><span class="keyword">let</span> res2=genObj.next() </div><div class="line"><span class="built_in">console</span>.log(res1)     <span class="comment">//&#123;value: 12, done: false&#125;  </span></div><div class="line"><span class="built_in">console</span>.log(res2)     <span class="comment">//最后一道工序，yield已经没有了，变成了undefined，所以输出的是&#123;value: undefined, done: true&#125;，这个地方想拿到返回值需要在函数里面写return，</span></div><div class="line">比如return55就可以输出来&#123;<span class="attr">value</span>: <span class="number">55</span>, <span class="attr">done</span>: <span class="literal">true</span>&#125;</div></pre></td></tr></table></figure>
<h3 id="ES7-amp-amp-ES8"><a href="#ES7-amp-amp-ES8" class="headerlink" title="ES7&amp;&amp;ES8"></a>ES7&amp;&amp;ES8</h3><h4 id="includes-检查数组是否包含某个东西"><a href="#includes-检查数组是否包含某个东西" class="headerlink" title="includes:检查数组是否包含某个东西"></a>includes:检查数组是否包含某个东西</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> arr=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>]</div><div class="line"><span class="built_in">console</span>.log(arr.includes(<span class="number">1</span>))  <span class="comment">//true</span></div><div class="line"><span class="built_in">console</span>.log(arr.includes(<span class="number">6</span>))  <span class="comment">//false</span></div></pre></td></tr></table></figure>
<h4 id="keys-values-entries"><a href="#keys-values-entries" class="headerlink" title="keys/values/entries"></a>keys/values/entries</h4><p>keys=&gt;把所有的key拿出来<br>values=&gt;把所有的value拿出来<br>entries=&gt;把所有的键值对拿出来<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> arr=[<span class="number">11</span>,<span class="number">22</span>,<span class="number">33</span>,<span class="number">44</span>,<span class="number">55</span>]</div><div class="line"><span class="keyword">for</span>(<span class="keyword">let</span> item <span class="keyword">of</span> arr.keys())&#123;</div><div class="line">    <span class="built_in">console</span>.log(item)    <span class="comment">//0,1,2,3,4</span></div><div class="line">&#125;</div><div class="line"><span class="keyword">for</span>(<span class="keyword">let</span> item <span class="keyword">of</span> arr.values())&#123;</div><div class="line">    <span class="built_in">console</span>.log(item)    <span class="comment">//11,22,33,44,55</span></div><div class="line">&#125;</div><div class="line"><span class="keyword">for</span>(<span class="keyword">let</span> item <span class="keyword">of</span> arr.entries())&#123;</div><div class="line">    <span class="built_in">console</span>.log(item)  <span class="comment">//[0,11],[1,22],[2,33],[3,44],[4,55]</span></div><div class="line">&#125;</div><div class="line">entries加上解构赋值可以这么玩</div><div class="line"><span class="keyword">for</span>(<span class="keyword">let</span> [key,value] <span class="keyword">of</span> arr.entries())&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;key&#125;</span>:<span class="subst">$&#123;value&#125;</span>`</span>)</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p> 需要注意的是上面这些json暂时玩不了<br><figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/ES7and8/keyvaluesentries.JPG" alt="这哥仨running" title="">
                </div>
                <div class="image-caption">这哥仨running</div>
            </figure><br><figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/ES7and8/jiegoufuzhientries.JPG" alt="结构赋值" title="">
                </div>
                <div class="image-caption">结构赋值</div>
            </figure></p>
<h4 id="幂"><a href="#幂" class="headerlink" title="幂"></a>幂</h4><p>以前的求幂是用Math的pow,ES7给了个比较6的方法,就是两个**,像python<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div></pre></td><td class="code"><pre><div class="line"><span class="built_in">console</span>.log(<span class="built_in">Math</span>.pow(<span class="number">5</span>,<span class="number">2</span>))   <span class="comment">//25</span></div><div class="line"><span class="built_in">console</span>.log(<span class="number">5</span>**<span class="number">2</span>)            <span class="comment">//25</span></div></pre></td></tr></table></figure></p>
<h4 id="字符串"><a href="#字符串" class="headerlink" title="字符串"></a>字符串</h4><p>ES6多了个startsWith/endsWith,7的时候多了个padStart/padEnd,也就是前后补东西，很简单理解，比方说过去我要取一个字符串的前面10位<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">let</span> str=<span class="string">'hhardyy'</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">`(<span class="subst">$&#123;str.padStart(<span class="number">10</span>)&#125;</span>)`</span>)    <span class="comment">//(   hhardyy)，不够10位它会补上，endsWith也是差不多</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">`(<span class="subst">$&#123;str.padEnd(<span class="number">10</span>)&#125;</span>)`</span>)      <span class="comment">//(hhardyy   )</span></div><div class="line"><span class="comment">//我还可以要求补位的时候补上我喜欢的东西</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">`(<span class="subst">$&#123;str.padStart(<span class="number">10</span>,<span class="string">'6'</span>)&#125;</span>)`</span>)<span class="comment">//(666hhardyy)</span></div><div class="line"><span class="built_in">console</span>.log(<span class="string">`(<span class="subst">$&#123;str.padEnd(<span class="number">10</span>,<span class="string">'6'</span>)&#125;</span>)`</span>)  <span class="comment">//(hhardyy666)</span></div></pre></td></tr></table></figure></p>
<h4 id="async-await"><a href="#async-await" class="headerlink" title="async await"></a>async await</h4><p>ES6的generator是配合yield用的，具体看上面写的ES6的东西，这里说的是ES7出来一个把它们取代的，叫做async<br> await,区别就是用generator的时候需要用到一个renner，但是async+await就不需要，可以直接用，但是对浏览器版本要求比较高，它的写法<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">Object</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'a'</span>)</div><div class="line">    <span class="keyword">await</span></div><div class="line">    <span class="built_in">console</span>.log(<span class="string">'b'</span>)</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<p>举例肯定是数据交互，要起一个本地服务,ajaxFunc是封装的一个普通的原生ajax,就不放出来了<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div></pre></td><td class="code"><pre><div class="line"><span class="keyword">async</span> <span class="function"><span class="keyword">function</span> <span class="title">getData</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">let</span> data1=<span class="keyword">await</span> ajaxFunc(<span class="string">'arr.txt'</span>)</div><div class="line">    <span class="keyword">let</span> data2=<span class="keyword">await</span> ajaxFunc(<span class="string">'json.txt'</span>)</div><div class="line">    <span class="built_in">console</span>.log(data1,data2)</div><div class="line">&#125;</div><div class="line">getData()</div></pre></td></tr></table></figure></p>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/ES7and8/asyncfile.JPG" alt="目录" title="">
                </div>
                <div class="image-caption">目录</div>
            </figure>
<figure class="image-bubble">
                <div class="img-lightbox">
                    <div class="overlay"></div>
                    <img src="/images/ES7and8/asynAjax.JPG" alt="get数据" title="">
                </div>
                <div class="image-caption">get数据</div>
            </figure>
<p>过去的generator写法，需要写一个runner，有人把它写成了库给别人去install，还有一点是generator不能写成箭头函数，但是async可以 async getData()=&gt;{}<br><figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">renner(<span class="function"><span class="keyword">function</span> *<span class="title">getData</span>(<span class="params"></span>)</span>&#123;</div><div class="line">    <span class="keyword">let</span> data1=<span class="keyword">yield</span> ajaxFunc(<span class="string">'arr.txt'</span>)</div><div class="line">    <span class="keyword">let</span> data2=<span class="keyword">yield</span> ajaxFunc(<span class="string">'json.txt'</span>)</div><div class="line">    <span class="built_in">console</span>.log(data1,data2)</div><div class="line">&#125;)</div></pre></td></tr></table></figure></p>

        </div>

        <blockquote class="post-copyright">
    <div class="content">
        
<span class="post-time">
    最后更新时间：<time datetime="2020-01-13T15:17:21.483Z" itemprop="dateUpdated">2020-01-13 23:17:21</time>
</span><br>


        
        谢谢浏览，我会继续努力的，示例：<a href="/2018/05/13/ES6的基本玩法/" target="_blank" rel="external">http://yoursite.com/2018/05/13/ES6的基本玩法/</a>
        
    </div>
    <footer>
        <a href="http://yoursite.com">
            <img src="/img/avatar.jpg" alt="BingZhenhuang">
            BingZhenhuang
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            
	<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ES6/">ES6</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ES7-ES8/">ES7&&ES8</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/async-await/">async await</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/const/">const</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/generator/">generator</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/keys-values-entries/">keys/values/entries</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/let/">let</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/map/">map</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/promise/">promise</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/set/">set</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/symbol/">symbol</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/字符串/">字符串</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/幂/">幂</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/箭头函数/">箭头函数</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/面向对象/">面向对象</a></li></ul>


            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/2018/05/13/ES6的基本玩法/&title=《ES6的基本玩法》 — 小方块 - hhardyy.com&pic=http://yoursite.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/2018/05/13/ES6的基本玩法/&title=《ES6的基本玩法》 — 小方块 - hhardyy.com&source=ES6是下一代JavaScript语言标准的统称，每年6月发布一次修订版，迄今为止已经发布了3个版本，分别是ES2015、ES2016、ES2017。" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/2018/05/13/ES6的基本玩法/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《ES6的基本玩法》 — 小方块 - hhardyy.com&url=http://yoursite.com/2018/05/13/ES6的基本玩法/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/2018/05/13/ES6的基本玩法/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/2018/05/19/vue组件通信/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">vue组件通信</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/2018/04/11/网络安全之数据包截取原理/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">网络安全之数据包截取原理</h4>
      </a>
    </div>
  
</nav>



    














</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        🤠 请我喝可乐！
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content" style="width:50%">
        
        <div class="reward-code" style="text-align:center">
            <div style="width:300px;margin:0px auto;">
               <img id="rewardCode" style="width:50%;height:60%;display:block; margin:0px auto;" src="/img/alipay.jpg" alt="支付宝打赏二维码">
               <span style="display:inline-block; margin-bottom:20px;">0.88(支付宝 aliPay)</span>
               <img id="rewardCode" style="width:50%;height:60%;display:block; margin:0px auto;" src="/img/wechat.jpg" alt="微信打赏二维码">
               <span style="display:inline-block;">0.88(微信 weChat)</span>
            </div>
        </div>
    </div>
</div>



</div>

        <script>
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
</script>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script>
    function secondToDate(second) {
        if (!second) {
            return 0;
        }
        var time = new Array(0, 0, 0, 0, 0);
        if (second >= 365 * 24 * 3600) {
            time[0] = parseInt(second / (365 * 24 * 3600));
            second %= 365 * 24 * 3600;
        }
        if (second >= 24 * 3600) {
            time[1] = parseInt(second / (24 * 3600));
            second %= 24 * 3600;
        }
        if (second >= 3600) {
            time[2] = parseInt(second / 3600);
            second %= 3600;
        }
        if (second >= 60) {
            time[3] = parseInt(second / 60);
            second %= 60;
        }
        if (second > 0) {
            time[4] = second;
        }
        return time;
    }</script>
<script type="text/javascript" language="javascript">
    function setTime() {
        var create_time = Math.round(new Date(Date.UTC(2017, 08, 18, 11, 42, 23)).getTime() / 1000);
        var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
        currentTime = secondToDate((timestamp - create_time));
        currentTimeHtml = 'Running：' + currentTime[0] + '年 ' + currentTime[1] + '天 '
                + currentTime[2] + '时 ' + currentTime[3] + '分 ' + currentTime[4]
                + '秒';
        document.getElementById("htmer_time").innerHTML = currentTimeHtml;
    }    setInterval(setTime, 1000);
</script>
<footer class="footer">
    <div class="top">
        

        <p>
          <span id="busuanzi_container_page_pv">
             [&nbsp;浏览量：&nbsp;<span id="busuanzi_value_page_pv"></span>&nbsp;]
          </span>
        </p>
    </div>
    <div class="bottom">
        <p>
        <span>BingZhenhuang &copy; 2017 - 2020</span>
            <span>
                
                Power by <a href="https://hhardyy.github.io/" target="_blank">zhen On August 8</a> 
            </span>
            <span id="htmer_time" "></span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=http://yoursite.com/2018/05/13/ES6的基本玩法/&title=《ES6的基本玩法》 — 小方块 - hhardyy.com&pic=http://yoursite.com/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=http://yoursite.com/2018/05/13/ES6的基本玩法/&title=《ES6的基本玩法》 — 小方块 - hhardyy.com&source=ES6是下一代JavaScript语言标准的统称，每年6月发布一次修订版，迄今为止已经发布了3个版本，分别是ES2015、ES2016、ES2017。" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/2018/05/13/ES6的基本玩法/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《ES6的基本玩法》 — 小方块 - hhardyy.com&url=http://yoursite.com/2018/05/13/ES6的基本玩法/&via=http://yoursite.com" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=http://yoursite.com/2018/05/13/ES6的基本玩法/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/', SHARE: true, REWARD: true };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>








<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '(•‾̑⌣‾̑•)✧˖°回来看我';
            clearTimeout(titleTime);
        } else {
            document.title = '(゜-゜)つロ欢迎回来';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
